<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x"%>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="列表" />
</jsp:include>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html, body, #container {
	width: 100%;
	height: 100%;
}
</style>
<title>多边形的绘制和编辑</title>
<link rel="stylesheet"
	href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
	src="https://webapi.amap.com/maps?v=1.4.15&key=054a3cfa27924834d3c8dd3b00282804&plugin=AMap.PolyEditor,AMap.DistrictSearch,AMap.MouseTool,AMap.Scale,AMap.MarkerClusterer"></script>
<script src="https://res.zvo.cn/msg/msg.js"></script>
<script src="https://res.zvo.cn/jquery/jquery-2.1.4.js"></script>

<script
	src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
    var map = new AMap.Map("container", {
        center: [116.400274, 39.905812],
        zoom: 5,
        resizeEnable:true//不开启则无法触发resize事件
    });
</script>
<script src="https://res.zvo.cn/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
//计算经纬度数组中的中心点
function getCenterPoint(data){
	var lng = 0.0,
	lat = 0.0;
	for(var i=0; i < data.length; i++){
		if($.isEmptyObject(data[i])){continue;}
			lng = lng + parseFloat(data[i]['lng']);
			lat = lat + parseFloat(data[i]['lat']);
	}
	lng = lng / data.length;
	lat = lat / data.length;
	return {lng : lng, lat : lat};
}
//找出行政区域
function searchArea(tas){
	if(tas.length > 1){
		//drawBounds(value);
		var myStr = tas;
		var strArray = myStr.split(",");
		for(var i = 0; i < strArray.length; i++){
			var loskj = strArray[i]
			drawBounds(loskj);
		}
	}
}
var lis = String()
//找传来的行政区位置
searchArea('${area}')
//画出行政区的范围覆盖物
function drawBounds(areaName) {
	var district = null;
	var polygons=[];
	//加载行政区划插件
	if(!district){
		//实例化DistrictSearch
		var opts = {
			subdistrict: 0,   //获取边界不需要返回下级行政区
			extensions: 'all',  //返回行政区边界坐标组等具体信息
			level: 'district'  //查询行政级别为 市
		};
		district = new AMap.DistrictSearch(opts);
	}
	//行政区查询
	//district.setLevel(document.getElementById('level').value)
	district.search(areaName, function(status, result) {
	//map.remove(polygons)//清除上次结果
	if(status == 'no_data'){
		msg.info('未搜到');
		return;
	}
	polygons = [];
	var bounds = result.districtList[0].boundaries;
	if (!bounds) {
		//没有搜到
		return;
	}
	for (var i = 0, l = bounds.length; i < l; i++) {
		//生成行政区划polygon
		var polygon = new AMap.Polygon({
			strokeWeight: 1.5,
			path: bounds[i],
			fillOpacity: 0.4,
			fillColor: '#80d8ff',
			strokeColor: '#0091ea',	
			zIndex: 48,
		});
	}
	map.add(polygon)
	map.setFitView(polygon);//视口自适应
	//对覆盖物进行初始化设置
	newPolygonSet(polygon);
	});
}
//画出当前网格的区域覆盖物
wangge();
//画出当前的网格
function wangge(){
	msg.loading('加载中');
	wm.post('getWanggeWg.json', {}, function(data){
		msg.close();
		for(var i = 0; i<data.list.length; i++){
			if(data.list[i].serviceArea.length > 1){
			var jsonArray = JSON.parse(data.list[i].serviceArea.replaceAll("{","[").replaceAll("}","]"));
			var polygon = new AMap.Polygon({
				path: jsonArray,
				strokeColor: "#FF33FF", 
				strokeWeight: 6,
				strokeOpacity: 0.2,
				fillOpacity: 0.4,
				fillColor: '#ff0000',
				zIndex: 50,
			})
			map.add(polygon);
			//缩放地图到合适的视野级别
			map.setFitView([ polygon ]);
			//对覆盖物进行初始化设置
			newPolygonSet(polygon, data.list[i]);
			}
		}
	});
}
function newPolygonSet(polygon, wangge){
	//覆盖物的path经纬度列表
	var alaap = [
		getCenterPoint(polygon.w.path).lng,getCenterPoint(polygon.w.path).lat
	]
	if(wangge != null){
	//构建自定义信息窗体
	var infoWindow = new AMap.InfoWindow({
		anchor: 'center',
		content:'网格名称：' + wangge.name + '<br/>骑手数量：' + wangge.qishouNum ,
	});
	//鼠标移入覆盖物
	var polygonListener = polygon.on("mouseover",function(){
		console.log("覆盖物移入");
		//infoWindow.open(map,[116.401337,39.907886])
		infoWindow.open(map,alaap);
		console.log(polygon);
	}).on("mouseout",function(){
		console.log("覆盖物移出");
		infoWindow.close();
	}).on("mousemove",function(){
		console.log("覆盖物上移动中");
	})
	polygonListener.setMap(map);
	//设置可以拖动点
	var areaEditor = new AMap.PolyEditor(map, polygon);
	}
}
console.log(${count})
//展示骑手的位置
markerClusterer();
function markerClusterer() {
	var carterPoints=[];
	msg.loading('加载中');
	wm.post('/wangge/fencemanagement/getQishou.json', {},function(data){
		msg.close();
		if(data.list.length >= 1){
			for (var e = 0 ; e < data.list.length ; e++) {
					var a = data.list[e];
					var positions =[
						a.longitude, a.latitude
					]
					
					carterPoints.push(new AMap.Marker({
						map: map,
						position: positions,
						content: "<div class='qimbox'>" 
						+ " <span class='loptxt'>"
						+ a.wanggeName 
						+ "</br>骑手名称：" 
						+ a.qishouName 
						+ "</br>订单数量：" 
						+ a.count 
						+ "</span><img class='lopimg' src='/js/images/cheweilan.png'/> </div>",
					}))
			}
		}
	});
}
</script>
<!-- 新增覆盖物 -->
<script type="text/javascript">
//判断网格矛是否存在, 2 代表没有分配电子围栏 1 代表网格用户不存在
exist(${msg});
function exist(states){
	if(states == 2){
		parent.msg.failure("您的网格未分配电子围栏，请联系代理商分配");
	}else if(states == 1){
		parent.msg.failure("您的网格不存在");
	}
}
</script>
<style>
.qimbox{
	max-width:120px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.loptxt{
	display: block;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
	padding: 10px;
	font-size:12px;
	white-space:nowrap;
	border: 1px solid #a9a9a9;
}
.lopimg{
	position: relative;
	z-index: -1;
	width:60px;
	margin-top: -36px;
}

</style>
</body>


<jsp:include page="/wm/common/foot.jsp"></jsp:include>
